<template>
    <div class="main-page-content page-demo-dashboard-analysis">
        <div class="page-content">
            <a-row type="flex" justify="space-between" :gutter="[16,16]">
                <a-col :span="6">
                    <div class="charts-card">
                        <div class="top">
                            <div class="title">总代码量</div>
                            <div class="tips">
                                <a-tooltip title="提交代码的总行数">
                                    <a-icon type="info-circle" />
                                </a-tooltip>
                            </div>
                        </div>
                        <div class="total">2,032,042</div>
                        <div class="charts" id="charts_1">
                        </div>
                        <div class="bottom">
                            <span>日代码量</span>
                            <span>2,423</span>
                        </div>
                    </div>
                </a-col>
                <a-col :span="6">
                    <div class="charts-card">
                        <div class="top">
                            <div class="title">网盘空间</div>
                            <div class="tips">
                                <a-tooltip title="已使用网盘空间">
                                    <a-icon type="info-circle" />
                                </a-tooltip>
                            </div>
                        </div>
                        <div class="total">100G</div>
                        <div class="charts" id="charts_2">
                        </div>
                        <div class="bottom">
                            <span>空闲空间</span>
                            <span>75G</span>
                        </div>
                    </div>
                </a-col>
                <a-col :span="6">
                    <div class="charts-card">
                        <div class="top">
                            <div class="title">访问量</div>
                            <div class="tips">
                                <a-tooltip title="总访问人数">
                                    <a-icon type="info-circle" />
                                </a-tooltip>
                            </div>
                        </div>
                        <div class="total">873,591,123</div>
                        <div class="charts" id="charts_3">
                        </div>
                        <div class="bottom">
                            <span>今日访问量</span>
                            <span>245,213</span>
                        </div>
                    </div>
                </a-col>
                <a-col :span="6">
                    <div class="charts-card">
                        <div class="top">
                            <div class="title">XX数量</div>
                            <div class="tips">
                                <a-tooltip title="总XX数量">
                                    <a-icon type="info-circle" />
                                </a-tooltip>
                            </div>
                        </div>
                        <div class="total">73,591,123</div>
                        <div class="charts" id="charts_4">
                        </div>
                        <div class="bottom">
                            <span>今日XX数</span>
                            <span>45,213</span>
                        </div>
                    </div>
                </a-col>
            </a-row>
            <a-divider></a-divider>
            <a-row class="model">
                <a-col :span="24">
                    <a-tabs>
                        <a-tab-pane key="1" tab="BUG未修复数量">
                            <OtherChart1></OtherChart1>
                        </a-tab-pane>
                        <a-tab-pane key="2" tab="BUG修复数量">
                            <OtherChart2></OtherChart2>
                        </a-tab-pane>
                        <template slot="tabBarExtraContent">
                            <a-space size="small">
                                <a-button type="link">今日</a-button>
                                <a-button type="link">本周</a-button>
                                <a-button type="link">本月</a-button>
                                <a-button type="link">本年</a-button>
                            </a-space>
                        </template>
                    </a-tabs>
                </a-col>
            </a-row>
        </div>
    </div>
</template>

<script>
import { Line, Liquid, Column, Sankey } from "@antv/g2plot";

import OtherChart1 from "./other/charts_1";
import OtherChart2 from "./other/charts_2";
export default {
    components:{
        OtherChart1,
        OtherChart2
    },
    data() {
        return {
            "year" : [
                { year: "1991", value: 3 },
                { year: "1992", value: 7 },
                { year: "1993", value: 2.5 },
                { year: "1994", value: 5 },
                { year: "1994", value: 1 },
                { year: "1995", value: 8.9 },
            ],

            "chart_1"  : null,
            "chart_2"  : null,
        };
    },
    mounted() {
        this.initChart1();
        this.initChart2();
        this.initChart3();
        this.initChart4();
    },
    methods: {
        initChart1() {
            const data = [
                { year: '1991', value: 3 },
                { year: '1992', value: 4 },
                { year: '1993', value: 3.5 },
                { year: '1994', value: 5 },
                { year: '1995', value: 4.9 },
                { year: '1996', value: 6 },
                { year: '1997', value: 7 },
                { year: '1998', value: 9 },
                { year: '1999', value: 13 },
            ];
            const line = new Line('charts_1', {
                data,
                height:150,
                xField: 'year',
                yField: 'value',
            });

            line.render();
        },
        initChart2(){
            const liquidPlot = new Liquid('charts_2', {
                height:150,
                percent: 0.25,
                outline: {
                    border: 4,
                    distance: 8,
                },
                wave: {
                    length: 128,
                },
            });
            liquidPlot.render();
        },
        initChart3(){
           const data = [
                { type: 'PC网站', sales: 38, },
                { type: 'APP', sales: 52, },
                { type: '小程序', sales: 61, },
            ];

            const columnPlot = new Column('charts_3', {
                data,
                height:150,
                xField: 'type',
                yField: 'sales',
                label: {
                    position: 'middle', // 'top', 'bottom', 'middle',
                    style: {
                    fill: '#FFFFFF',
                    opacity: 0.6,
                    },
                },
                xAxis: {
                    label: {
                    autoHide: true,
                    autoRotate: false,
                    },
                },
                meta: {
                    type: {
                    alias: '类别',
                    },
                    sales: {
                    alias: '销售额',
                    },
                },
            });

            columnPlot.render(); 
        },
        initChart4(){
            const DATA = [
                { source: '首次打开', target: '首页 UV', value: 160 },
                { source: '结果页', target: '首页 UV', value: 40 },
                { source: '验证页', target: '首页 UV', value: 10 },
                { source: '我的', target: '首页 UV', value: 10 },
                { source: '朋友', target: '首页 UV', value: 8 },
                { source: '其他来源', target: '首页 UV', value: 27 },
                { source: '首页 UV', target: '理财', value: 30 },
                { source: '首页 UV', target: '扫一扫', value: 40 },
                { source: '首页 UV', target: '服务', value: 35 },
                { source: '首页 UV', target: '蚂蚁森林', value: 25 },
                { source: '首页 UV', target: '跳失', value: 10 },
                { source: '首页 UV', target: '借呗', value: 30 },
                { source: '首页 UV', target: '花呗', value: 40 },
                { source: '首页 UV', target: '其他流向', value: 45 },
            ];

            const sankey = new Sankey('charts_4', {
                data: DATA,
                sourceField: 'source',
                targetField: 'target',
                weightField: 'value',
                nodeWidthRatio: 0.008,
                nodePaddingRatio: 0.03,
            });

            sankey.render();
        }
    }
};
</script>

<style lang="less" scoped>
@import "./analysis.less";
</style>